<template>
	<xbd-pages-content title="我的消息">
		<template #default>
			<!-- #ifdef APP-PLUS || H5 -->
			<uni-nav-bar left-icon="back" title="我的消息" @clickLeft="clickLeft" color="#394954" backgroundColor="#F8F8F8">
				<template #right >
					<image class="right_icon" src="../../static/images/msg/msg.svg" mode="" @click="rightState"></image>
				</template>
			</uni-nav-bar>
			<!-- #endif -->
		</template>
		<template #content>
			<view class="msg" :style="'minHeight : ' + windowHeight + 'px;'">
				<!-- #ifdef APP-PLUS || H5 -->
				<view class="fixed" :style="'top: ' + top + ';'">
					<v-tabs v-model="current" :tabs="tabs" @change="changeTab" pills paddingItem="0 106rpx"></v-tabs>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS || H5 -->
				<view class="fixed">
					<v-tabs v-model="current" :tabs="tabs" @change="changeTab" pills paddingItem="0 106rpx"></v-tabs>
					<image v-if="isShow" class="right_icon2" src="../../static/images/msg/msg.svg" mode="" @click="rightState">
					<image v-else class="right_icon2" src="../../static/images/msg/msg2.png" mode="">
					</image>
				</view>
				<!-- #endif -->

				<view class="bg">
				</view>
				<view class="content">
					<uni-load-more v-if="loading" status="loading" :iconSize="12" :contentText="{
							contentdown: '上拉显示更多',
							contentrefresh: '正在加载...',
							contentnomore: '到底了~'
					}"></uni-load-more>
					<xbd-null-list v-if="!list.length && !loading"></xbd-null-list>
					<uni-list v-if="list.length">
						<view v-if="current===0">
							<xbd-msg v-for="(item,index) in list" :key="index" :msgInfo="item" :index="index"></xbd-msg>
						</view>
						<view v-else-if="current===1">
							<xbd-announcement v-for="(item,index) in list" :key="index" :msgInfo="item" :index="index">
							</xbd-announcement>
						</view>
						<xbd-loading-more v-if="list.length>=10" :status-num="statusNum" :is-load-more="isLoadMore">
						</xbd-loading-more>
					</uni-list>
				</view>
				<!-- 全部已读弹出框 -->
				<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' title="全部已读"
					content="确认将全部未读消息设为已读？"></xbd-popup>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	// import {
	// 	systemList,
	// 	announcementList
	// } from '../../mock/information/information.js';
	import {
		Message
	} from '@/api/index.js';
	export default {
		data() {
			return {
				top: '',
				current: 0,
				// systemList,
				windowHeight: 0,
				// announcementList,
				isShow:true,
				tabs: ['系统消息', '通知公告'],
				showDialog: false,
				list: [],
				statusNum: 2,
				isLoadMore: false,
				loading: false,
				queryInfo: {
					page: 0,
					perpage: 10,
					type: 'system'
				}
			}
		},
		methods: {
			loadmore() {
				this.queryInfo.page++;
				this.statusNum = 1;
				// this.isLoadMore = true;
				try {
					// 在定时器中执行请求方便 tab切换 关闭请求
					this.timer = setTimeout(async () => {
						const res = await Message.getMessage(this.queryInfo);
						if (res.success) {
							this.list = this.list.concat(res.data.list);
							if (res.data.list.length === this.queryInfo.perpage) {
								this.statusNum = 2;
								this.isLoadMore = true;
							} else {
								this.statusNum = 0;
							}
						} else {
							this.queryInfo.page--;
							this.statusNum = 0;
						}
					}, 0);
				} catch {
					this.queryInfo.page++;
				}
			},
			async init() {
				// this.loading = true;
				try {
					this.$showLoading('加载中');
					const res = await Message.getMessage(this.queryInfo);
					uni.hideLoading();
					// this.loading = false;
					if (res.success) {
						this.list = res.data.list;
						// console.log(this.list);
						if (res.data.list.length === this.queryInfo.perpage) {
							this.statusNum = 2;
							this.isLoadMore = true;
						} else {
							this.statusNum = 0;
						}
					}
				} catch {
					uni.hideLoading();
					// this.loading = false;
				}
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			async dialogConfirm() {
				//弹出框确认操作
				this.showDialog = false;
				const res = await Message.allReadMessage();
				console.log(res,'message')
				if (res.success) {
					this.list.forEach(item => item.is_read = true);
				}
				console.log("确认", res)
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},
			rightState() {
					this.showDialog = true;
					console.log(123)
				
			},
			changeTab(index) {
				console.log(index);
				if (index) {
					this.queryInfo.type = 'notice'
					this.isShow = false
				} else {
					this.queryInfo.type = 'system'
					this.isShow = true
				}
				this.list = [];
				this.queryInfo.page = 0;
				this.init();
			},
			reading(inx) {
				this.list[inx].is_read = true;
				console.log(inx,'inx')
			}
		},
		onUnload() {
			uni.$off('isReaded', this.reading)
		},
		onLoad(res) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
					console.log(this.windowHeight);
				}
			});
			const {
				statusBarHeight
			} = uni.getSystemInfoSync();
			this.top = statusBarHeight + 44 + 'px';
			this.init();
			uni.$on('isReaded', this.reading)
		},
		onReachBottom() {
			console.log('拉到库里')
			// 上拉加载
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-list--border-bottom {
		background-color: #FFFFFF;
	}

	/* #ifndef APP-PLUS || H5 */
	::v-deep .v-tabs__container-item {
		padding: 0 90rpx !important;
	}

	.msg {
		display: flex;
		flex-direction: column;
	}

	/* #endif */
	.fixed {
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20px 50rpx;
		width: 750rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		z-index: 999;
	}

	.bg {
		height: 140rpx;
	}

	.right_icon {
		// z-index: 999;
		width: 52rpx;
		height: 52rpx;
	}

	.right_icon2 {
		margin-top: 8rpx;
		width: 52rpx;
		height: 52rpx;
	}
	.content {
		flex: 1;
		// box-sizing: border-box;
		padding-bottom: 30px;
		padding-top: 40rpx;
		background-color: #FFFFFF;
	}
</style>
